<template>
    <!-- <view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
		<view class="content" :style="'background-image: url(/static/images/reg_bg.png);'">
        <view class="warp">
           <!-- <c-gap height="100rpx" /> -->
		    <view style="height: 100rpx;"></view>
            <view class="nav-bar banxin">
                <view class="title">选择性别</view>
            </view>
          <!--  <c-gap height="102rpx" />

            <c-gap height="12rpx" /> -->
			  <view style="height: 112rpx;"></view>
            <view class="sex-desc">
                <image class="notice" :src="$c.config.media + '/yuemini/notice.png'" mode=""></image>
                <view class="text">性别注册后不可修改，请谨慎选择</view>
            </view>
          <!--  <c-gap height="68rpx" /> -->
            <view class="sex-select-line">
                <view class="sex-select" @tap="data.sex = 2">
                    <image :src="$c.config.media + '/yuemini/nv_active.png'" mode="" v-if="data.sex == 2"></image>
                    <image :src="$c.config.media + '/yuemini/nv.png'" mode="" v-else></image>
                    <view class="sex-name" :class="{ active: data.sex == 2 }">女士</view>
                </view>
                <view class="sex-select" @tap="data.sex = 1">
                    <image :src="$c.config.media + '/yuemini/nan_active.png'" mode="" v-if="data.sex == 1"></image>
                    <image :src="$c.config.media + '/yuemini/nan.png'" mode="" v-else></image>
                    <view class="sex-name" :class="{ active: data.sex == 1 }">男士</view>
                </view>
            </view>

           <!-- <c-gap height="200rpx" /> -->
		   <view style="height: 200rpx;"></view>
           <view class="register-btn1" @tap="next()">继续</view>
        </view>
    </view>
</template>

<script>
	// import CGap from '@/components/c-gap.vue';
export default {
	
    data() {
        return {
            $c: this.$c,
            current: 0,
            swiperHeight: 0,
            data: {
                device: '478ca4671a993356',
                sex: '1',
                nickname: '',
                birthday: '',
                height: '',
                weight: '',
                career: '',
                income: '',
                save_city: '',
                avatar: '',
                phone: '',
                code: '',
                password: '',
                phone_model: 'RMX3367'
            }
        };
    },
    onLoad() {
		// this.$c.jump('/pages/register/register8');
  //       let shebei = uni.getDeviceInfo();
  //       this.data.device = shebei.deviceId;
  //       this.data.phone_model = shebei.deviceModel;
    },
    methods: {
	
        async changeTab(index) {
            this.current = index;
        },
        next() {
            uni.setStorageSync('registerInfo', this.data);
            this.$c.jump('/pages/m-pages/m-login/register1');
        }
    }
};
</script>

<style lang="scss">
.content {
    width: 750rpx;
    min-height: 100vh;
    background-size: 750rpx 100vh;
    //background-repeat: no-repeat;
    background-position: 0 0;

    .warp {
        width: 716rpx;
        margin: 0 auto;

        .nav-bar {
            display: flex;
            font-weight: 550;
            font-size: 34rpx;
            color: #fff;

            .title {
                width: 680rpx;
                text-align: center;
				color: #000;
            }
        }

        .sex-title {
            font-weight: 600;
            font-size: 48rpx;
            color: #fff;
            line-height: 62rpx;
        }

        .sex-desc {
            margin: 0 auto;
            width: 694rpx;
            height: 64rpx;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 32rpx;
            display: flex;
            align-items: center;

            .notice {
                width: 118rpx;
                height: 40rpx;
                display: block;
            }

            .text {
                font-size: 30rpx;
                font-weight: 400;
                color: #fff;
                line-height: 64rpx;
            }
        }

        .sex-select-line {
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            width: 694rpx;

            .sex-select {
                width: 268rpx;
                height: 368rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                text-align: center;

                .sex-name.active {
                    color: #c5c5c5;
                }

                .sex-name {
                    width: 268rpx;
                    text-align: center;
                    font-weight: 600;
                    height: 50rpx;
                    font-size: 36rpx;
                    font-weight: 500;
                    color: #999999;
                    line-height: 50rpx;
                }

                image {
                    width: 268rpx;
                    height: 268rpx;
                    display: block;
                }
            }
        }

        .register-btn1 {
            margin: 0 auto;
            text-align: center;
            line-height: 120rpx;
            color: #a14617;
            width: 552rpx;
            height: 120rpx;
            background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
            border-radius: 60rpx;
        }
    }
}
</style>
